@import './var.scss';
@import './mixin.scss';

/* 全局 */
#app,
body,
html {
  @include wh(100%, 100%);
  background-color: $main-bg;
  font-size: $font-size-small;
}

a {
  color: $color-text-s;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #000;
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:-webkit-any-link {
  text-decoration: none;
}

a,
button,
input,
textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  outline: none !important;
  -webkit-appearance: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

/* 大布局样式 */
.aminui {
  display: flex;
  flex-flow: column;
}

.aminui-wrapper {
  display: flex;
  flex: 1;
  overflow: auto;
}

.flex {
  @include fl();
}

/*布局设置*/
.layout-setting {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 3px 0 0 3px;
  top: 50%;
  right: 0;
  z-index: 100;
  background: $primary-color;
  @include fl();
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.layout-setting i {
  @include sc($font-size-large, $color-text);
  // font-size: $font-size-large;
  // color: $color-text;
}

/* 头部 */
.adminui-header {
  width: 100%;
  height: 58px;
  background: $main-bg-p;
  // color: $color-text;
  @include fj();
  position: fixed;
  z-index: 9;
  box-shadow: 0 1px 8px rgb(0 21 41 / 12%);
  // margin-bottom: 58px;
  // background: linear-gradient(-135deg, #00dbde, #5c7bd1);
}

.adminui-header-left {
  @include fl();
  padding: 0 20px;
  &:hover {
    color: $primary-color;
    background-color: #f9f9fc;
  }
}

.adminui-header-right {
  @include fl();
}

.adminui-header .logo-bar {
  font-size: 20px;
  font-weight: bold;
  @include fl();
}

.adminui-header .logo-bar .logo {
  margin-right: 10px;
  @include wh(35px, 35px)
}

.adminui-header .nav {
  display: flex;
  height: 100%;
  margin-left: 40px;
}

.adminui-header .nav li {
  padding: 0 10px;
  margin: 0 10px 0 0;
  font-size: $font-size-medium;
  color: rgba(255, 255, 255, 0.6);
  list-style: none;
  height: 100%;
  @include fl();
  cursor: pointer;
}

.adminui-header .nav li i {
  margin-right: 5px;
}

.adminui-header .nav li:hover {
  color: $color-text;
}

.adminui-header .nav li.active {
  background: rgba(255, 255, 255, 0.1);
  color: $color-text;
}

.adminui-header .user-bar .panel-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.adminui-header .user-bar .user:hover {
  background-color: #f9f9fc;
}

.adminui-header .user-bar .user label {
  color: $color-text;
}


/* 左侧菜单 */
.aminui-side-split {
  width: 65px;
  flex-shrink: 0;
  background: #222b45;
  display: flex;
  flex-flow: column;
}

.aminui-side-split-top {
  height: 49px;
}

.aminui-side-split-top a {
  display: inline-block;
  @include wh(100%, 100%);
  @include fl();
  justify-content: center;
}

.aminui-side-split-top .logo {
  height: 30px;
  vertical-align: bottom;
}

.adminui-side-split-scroll {
  overflow: auto;
  overflow-x: hidden;
  height: 100%;
  flex: 1;
}

.aminui-side-split li {
  cursor: pointer;
  @include wh(65px, 65px);
  @include fl();
  color: $color-text;
  text-align: center;
  flex-direction: column;
  justify-content: center;
}

.aminui-side-split li i {
  font-size: $font-size-large;
}

.aminui-side-split li p {
  margin-top: 5px;
}

.aminui-side-split li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.aminui-side-split li.active {
  background: #409EFF;
}

.adminui-side-split-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
  @include borderRadius(5px);
}

.adminui-side-split-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.adminui-side-split-scroll::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0);
}

.adminui-side-split-scroll::-webkit-scrollbar-track:hover {
  background-color: rgba(255, 255, 255, 0);
}

.aminui-side {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
  display: flex;
  flex-flow: column;
  flex-shrink: 0;
  z-index: 10;
  @include wh(210px, 100vh);
  background: $main-bg-p;
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, .05);
  border-right: 1px solid #e6e6e6;
  transition: width 0.3s;
}

.adminui-side-top {
  border-bottom: 1px solid #ebeef5;
  height: 50px;
  line-height: 50px;
}

.adminui-side-top h2 {
  padding: 0 20px;
  font-size: 17px;
  color: #3c4a54;
}

.adminui-side-scroll {
  overflow: auto;
  overflow-x: hidden;
  flex: 1;
}

.adminui-side-bottom {
  border-top: 1px solid #ebeef5;
  height: 35px;
  cursor: pointer;
  @include fl();
  padding: 0 15px;
  justify-content: center;
  .bottom-text {
    @include fl();
    margin-right: 12px;
  }
}

.adminui-side-bottom i {
  font-size: $font-size-medium-x;
}

.adminui-side-bottom:hover {
  color: var(--el-color-primary);
}

.aminui-side.isCollapse {
  width: 65px;
}

/* 右侧内容 */
.aminui-body {
  flex: 1;
  display: flex;
  flex-flow: column;
}

.adminui-topbar {
  height: 50px;
  background: $main-bg;
  margin-top: 58px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  @include fj();
}

.adminui-topbar .left-panel {
  @include fl();
}

.adminui-topbar .right-panel {
  @include fl();
}

.right-panel-search {
  @include fl();
}

.right-panel-search>*+* {
  margin-left: 10px;
}

.adminui-tags {
  height: 35px;
  background: $main-bg-p;
  border-bottom: 1px solid #e6e6e6;
}

.adminui-tags ul {
  display: flex;
  overflow: hidden;
}

.adminui-tags li {
  cursor: pointer;
  display: inline-block;
  height: 34px;
  line-height: 34px;
  position: relative;
  flex-shrink: 0;
}

.adminui-tags li::after {
  content: " ";
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0px;
  background-image: linear-gradient($main-bg-p, #e6e6e6);
}

.adminui-tags li a {
  display: inline-block;
  padding: 0 10px;
  @include fl();
  @include wh(100%, 100%);
  color: #999;
  text-decoration: none;
}

.adminui-tags li i {
  margin-left: 10px;
  @include fl();
  @include wh(18px, 18px);
  @include borderRadius(3px);
  justify-content: center;
}

.adminui-tags li i:hover {
  background: rgba(0, 0, 0, .2);
  color: $color-text;
}

.adminui-tags li:hover {
  background: #ecf5ff;
}

.adminui-tags li.active {
  background: #409EFF;
}

.adminui-tags li.active a {
  color: $color-text;
}

.adminui-tags li.sortable-ghost {
  opacity: 0;
}

.adminui-main {
  overflow: auto;
  background-color: $main-bg;
  flex: 1;
}

/*页面最大化*/
.aminui.main-maximize {
  .main-maximize-exit {
    display: block;
  }

  .aminui-side-split,
  .aminui-side,
  .adminui-header,
  .adminui-topbar,
  .adminui-tags {
    display: none;
  }
}

.main-maximize-exit {
  display: none;
  position: fixed;
  z-index: 3000;
  top: -20px;
  left: 50%;
  margin-left: -20px;
  @include wh(40px, 40px);
  @include borderRadius(50%);
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
}

.main-maximize-exit i {
  margin-top: 22px;
  @include sc($font-size-medium, $color-text);
}

.main-maximize-exit:hover {
  background: rgba(0, 0, 0, 0.4);
}